<template>
  <div>
    <h1>个人中心</h1>
    <button @click="goHome">go homePage</button>
    <button @click="$router.forward()">forward</button>
    <button @click="$router.go(-3)">test go</button>
    <!-- 
      编程式路由导航：
      $router.push()  添加记录 （能回退）
      $router.replace()  使用新路由替换当前的路由，替换完毕后不能回退
      $router.back() 回退
      $router.forward() 下一个路由
      $router.go() 填写的是数字
      正数 下一个
      负数  上一个



     -->
    <hr />
    <ul>
      <li>
        <router-link :to="{ name: 'shezhi' }">设置</router-link>
      </li>
      <li>
        <router-link :to="{ name: 'geren' }">个人</router-link>
      </li>
    </ul>
    <!-- 命名视图 同级显示多个视图 不是嵌套关系 -->
    <!-- 出口 -->
    <router-view></router-view>
    <!-- 一个路径对应多个 组件 -->
    <h1>one</h1>
    <!-- <router-view name="one"></router-view> -->
    <h1>two</h1>
    <!-- <router-view name="two"></router-view> -->
  </div>
</template>

<script>
export default {
  name: "PersonalPage",
  mounted() {
    console.log(this.$router);
  },
  methods: {
    goHome() {
      /* this.$router.push({
        // path: "/homepage",
        name: "homepage",
        query: {
          name: "hanhan",
        },
      }); */
      this.$router.push("/homepage");
    },
  },
};
</script>

<style lang="scss" scoped>
</style>